<template>
  <view class="page-wrapper">
    <view class="search-header">
      <JSearchInput place="搜索应用名称、应用AppId、商户号、商户名称" @search="searchApp" @resetSearch="resetSearch" />
    </view>
    <template v-for="v in appList" :key="v.appId">
      <appCard v-bind="v" @tap="toDetails(v.appId)" />
    </template>
    <jeepayListNull :isShow="!hasNext" :list="[]" />
    <view class="select-footer">
      <JButton pd="30rpx 30rpx 50rpx 30rpx" @HandleTouch="toCreated">创建应用</JButton>
    </view>
  </view>
</template>

<script setup>
import { onLoad, onUnload, onReachBottom, onPullDownRefresh } from '@dcloudio/uni-app'
import JSearchInput from '@/components/newComponents/JSearchInput/JSearchInput.vue' //自定义搜索框
import { $getAppList } from '@/http/apiManager.js'
import appCard from './components/appCard.vue'
import JButton from '@/components/newComponents/JButton/JButton'
import { reactive } from 'vue'
const appList = reactive([])
const params = {
  pageNumber: 1,
  pageSize: 10,
}
// 是否有下一页
let hasNext = undefined
const getList = () => {
  $getAppList(params).then(({ bizData }) => {
    hasNext = bizData.hasNext
    appList.push(...bizData.records)
    uni.stopPullDownRefresh()
  })
}
const toDetails = (appId) => {
  uni.navigateTo({
    url: '/pageWork/appManage/appDetails?appId=' + appId,
    success: () => {},
  })
}
// 搜索
const searchApp = (val) => {
  params.unionSearchId = val
  params.pageNumber = 1
  appList.length = 0
  getList()
}
// 重置搜索
const resetSearch = () => {
  params.unionSearchId = ''
  params.pageNumber = 1
  appList.length = 0
  getList()
}
onPullDownRefresh(() => {
  params.pageNumber = 1
  appList.length = 0
  getList()
})
onLoad(() => {
  getList()
  uni.$on('upDateList', () => {
    params.pageNumber = 1
    appList.length = 0
    console.log('appList', appList)
    getList()
  })
})
// 去创建应用页面
const toCreated = () => {
  uni.navigateTo({
    url: '/pageWork/appManage/createdAppId',
  })
}
// 页面卸载移除事件侦听
onUnload(() => {
  uni.$off(['upDateList'])
})
onReachBottom(() => {
  if (!hasNext) return
  params.pageNumber++
  getList()
})
</script>

<style lang="scss" scoped>
.page-wrapper {
  background-color: #f7f7f7;
  min-height: calc(100vh - 88rpx);
}
.search-header {
  position: sticky;
  top: 0;
  right: 0;
  left: 0;
  z-index: 10;
  background-color: #f7f7f7;
}
.select-footer {
    position: fixed;
    right: 0;
    left: 0;
    bottom: 0;
  }
</style>
